<template>
  <div class="home">
    <div class="countdown-app">
      <h1>🎉倒计时</h1>
      <div>
        <el-text size="small" class="target-time">目标时间：</el-text>
        <el-date-picker
          v-model="targetDate"
          type="datetime"
          placeholder="请选择目标日期时间"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="x"
          class="responsive-input"
        />
      </div>
      <p>距离 目标时间还有：</p>
      <div class="countdown-timer">
        <div class="time-unit">
          <span class="number">{{ timeLeft.days }}</span>
          <span class="label">天</span>
        </div>
        <div class="time-unit">
          <span class="number">{{ timeLeft.hours }}</span>
          <span class="label">时</span>
        </div>
        <div class="time-unit">
          <span class="number">{{ timeLeft.minutes }}</span>
          <span class="label">分</span>
        </div>
        <div class="time-unit">
          <span class="number">{{ timeLeft.seconds }}</span>
          <span class="label">秒</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, watch, onMounted, onBeforeUnmount } from "vue";
// import axios from "axios";

// 响应式数据
const targetDate = ref(new Date("2025-12-31 23:59:59").getTime());
const timeLeft = reactive({
  days: 0,
  hours: 0,
  minutes: 0,
  seconds: 0,
});
const timer = ref(null);

// 计算剩余时间
function calculateTimeLeft() {
  const now = new Date().getTime();
  const difference = targetDate.value - now;

  if (difference > 0) {
    timeLeft.days = Math.floor(difference / (1000 * 60 * 60 * 24));
    timeLeft.hours = Math.floor(
      (difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
    );
    timeLeft.minutes = Math.floor(
      (difference % (1000 * 60 * 60)) / (1000 * 60)
    );
    timeLeft.seconds = Math.floor((difference % (1000 * 60)) / 1000);
  } else {
    timeLeft.days = 0;
    timeLeft.hours = 0;
    timeLeft.minutes = 0;
    timeLeft.seconds = 0;
    clearTimer();
  }
}

// 启动定时器
function startTimer() {
  clearTimer();
  timer.value = setInterval(() => {
    calculateTimeLeft();
  }, 1000);
}

// 清除定时器
function clearTimer() {
  if (timer.value) {
    clearInterval(timer.value);
    timer.value = null;
  }
}

// 测试接口
// async function test() {
//   try {
//     const response = await axios.post(
//       "/api/test/test",
//       {},
//       {
//         headers: {
//           params: "root",
//         },
//       }
//     );
//     console.log("响应数据:", response.data);
//     alert("请求成功!" + response.data.data);
//   } catch (error) {
//     console.error("请求失败:", error);
//     alert("请求失败" + error.message || error);
//   }
// }

// 生命周期钩子
onMounted(() => {
  startTimer();
});

onBeforeUnmount(() => {
  clearTimer();
});

// 监听 targetDate 变化
watch(targetDate, (newVal) => {
  if (newVal && typeof newVal === "number") {
    calculateTimeLeft();
    startTimer();
  }
});
</script>

<style scoped>
.countdown-app {
  text-align: center;
  padding: 2rem;
  font-family: "Arial", sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  min-height: 100vh;
  margin: -60px -20px 0 -20px;
}

h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.countdown-timer {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin: 3rem 0;
}

.time-unit {
  background: rgba(255, 255, 255, 0.2);
  padding: 1.5rem;
  border-radius: 10px;
  min-width: 100px;
}

.number {
  display: block;
  font-size: 3rem;
  font-weight: bold;
}

.label {
  font-size: 1rem;
  opacity: 0.8;
}

.target-time {
  color: white;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .countdown-timer {
    flex-direction: column;
    gap: 1rem;
  }

  .time-unit {
    min-width: auto;
  }
}
</style>
